<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="Author" content="网页作者" />
    <meta name="Copyright" content="网站版权" />
    <meta name="keywords" content="网站关键字" />
    <meta name="description" content="网站描述" />
    <title>AngularJS的路由机制</title>
        <script type="text/javascript" src="../js/angular.min.js" ></script>
        <script type="text/javascript" src="../js/angular-route.min.js" ></script>
<style type="text/css">
*{margin:0;padding:0}
a{text-decoration:none;color:#111;font-size:16px;}
ul,li{list-style:none;}
body{font-size:12px;font-family:"微软雅黑";}
</style>
</head>
<body ng-app="myapp">
    <!-- 编写页面布局 -->
    <div>
        <h1>header头部</h1>
        <a href="#/JavaEE">JavaEE</a>
        <a href="#/javascript">javascript</a>
        <a href="#/hadoop">hadoop</a>
    </div>

    <!-- 路由加载后  更新变化的内容 -->
    <div ng-view>

    </div>


    <div>
        <h1>Foot底部</h1>
    </div>


 <script type="text/javascript">
     //定义myapp模块
     var myapp = angular.module("myapp",["ngRoute"]);

     //配置模块路由
     myapp.config(["$routeProvider",function($routeProvider){
    $routeProvider
    .when('/JavaEE',{
        templateUrl:'5_1.html'
        }).when('/javascript',{
        templateUrl:'5_2.html'
        }).when('/hadoop',{
        templateUrl:'5_3.html'
        }).otherwise({
        redirectTo: '/javascript'
        });

     }]);
 </script>
 </body>
</html>